<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录界面</title>
    <!-- 引入Vue.js -->
    <script src="./ststic/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./ststic/js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./ststic/js/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <template>
            <div class="login-container">
                <div class="logo"></div>
                <div class="form">
                    <h1>社团管理系统</h1>
                    <el-card shadow="never" class="login-card">
                        <el-form id="myForm" action="/login" method="post">
                            <label for="sid">账号</label><br>
                            <input style="width: 33%" type="text" id="sid" name="sid" value="20220000"><br>
                            <label for="password">密码</label><br>
                            <input style="width: 33%" type="password" id="password" name="password" value="admin">
                            <br><br>
<!--                            <input type="submit" value="登录">-->
                            <el-button type="primary" value="登录" native-type="submit" size="mini" id="myButton"
                            style="width: 34%">登录</el-button><br><br>
                            <el-button onclick=window.location.href='register.jsp'>注册</el-button>
                        </el-form>
                    </el-card>
                </div>
            </div>
        </template>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        method:{

        },
        created(){
            // document.getElementById("myButton").click();
        }
    })
</script>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .login-container {
        display: flex;
        align-items: stretch;
        height: 100vh;

        .logo {
            flex: 3;
            background: rgba(38, 72, 176) url(./ststic/img/login_back.png) no-repeat center / cover;
            border-top-right-radius: 60px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            padding: 0 100px;

            & p {
                color: #fff;
                font-size: 18px;
                margin-top: 20px;
                width: 300px;
                text-align: center;
            }
        }

        .form {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 176px;

            .el-card {
                border: none;
                padding: 0;
            }

            & h1 {
                padding-left: 20px;
                font-size: 24px;
            }

            .el-input {
                width: 350px;
                height: 44px;

                .el-input__inner {
                    background: #f4f5fb;
                }
            }

            .el-checkbox {
                color: #606266;
            }
        }
    }
</style>
</html>
